import { firstUpperCase, isUpperCase } from './generator-html';

export const generatorTopSearchHtml = (widgetList: any, selectedComponent) => {
  return `<div class="search-top-title">
  <div class="left-box">
    ${widgetList[0].showExportBtn ? generatorTopSearchExportBtn(selectedComponent) : ''}
    ${widgetList[0].position === 'left' ? generatorTopSearchComponent(widgetList, selectedComponent) : ''}
  </div>
  <div class="right-box">${widgetList[0].position === 'right' ? generatorTopSearchComponent(widgetList, selectedComponent) : ''}
    <div class="table-top-btn">
      <button nz-button nzType="primary" (click)="${isUpperCase(selectedComponent, 'crud')}.clickSearch()">查询</button>
      <button nz-button nzType="default" (click)="${isUpperCase(selectedComponent, 'crud')}.clickReset()">重置</button>
    </div>
  </div>
</div>`;
};

export const generatorTopSearchTs = (widgetList: any, selectedComponent) => {
  return `
${isUpperCase(selectedComponent, 'ServiceMap')}: ServiceMap = {
  http: this.http,
  message: this.message,
  that: this
};
${isUpperCase(selectedComponent, 'crud')} = new Crud(
  this.${isUpperCase(selectedComponent, 'ServiceMap')},
  ${firstUpperCase(selectedComponent.field)}SearchParams
);

class ${firstUpperCase(selectedComponent.field)}SearchParams {
  ${generatorTopSearchSearchParams(widgetList)}
}
  `;
};

const generatorTopSearchExportBtn = (selectedComponent) => {
  return `<div class="table-top-btn">
      <nz-dropdown [nzTrigger]="'hover'">
        <button nz-dropdown nz-button nzType="default">
          <i nz-icon nzType="upload" nzTheme="outline"></i>导出
        </button>
        <ul nz-menu>
          <li nz-menu-item (click)="${isUpperCase(selectedComponent, 'crud')}.exportShow(1)">导出选中</li>
          <li nz-menu-item (click)="${isUpperCase(selectedComponent, 'crud')}.exportShow(3)">导出全部</li>
        </ul>
      </nz-dropdown>
    </div>`;
};

const generatorTopSearchComponent = (widgetList: any, selectedComponent) => {
  let temp = '\n    ';
  widgetList.map(item => {
    const len =  item.children.length;
    item.children.map((ele, index) => {
      const comp = ['Input', 'DatePicker', 'Select'];
      if (!comp.includes(ele.name)) { return; }
      temp += `<div class="search-item">
      <div class="label-name">${ele.label}：</div>
      <div class="control-item">
        ${componentMap(ele, selectedComponent)}
      </div>
    </div>` + (index < len - 1 ? '\n    ' : '');
    });
  });
  return temp;
};

const componentMap = (data: any, selectedComponent) => {
  const map = {
    Input: `<input type="text" nz-input placeholder="${data.placeholder}" [(ngModel)]="${isUpperCase(selectedComponent, 'crud')}.searchParam.${data.field}" (keyup.enter)="${isUpperCase(selectedComponent, 'crud')}.clickSearch()" />`,
    DatePicker: generatorTopSearchTime(data),
    Select: generatorTopSearchSelect(data)
  };
  return map[data.name];
};

const generatorTopSearchSearchParams = (widgetList: any) => {
  let temp = '';
  widgetList.map(item => {
    const len = item.children.length;
    item.children.map((ele, index) => {
      temp += `${ele.field}: string;`;
      temp += (index < len - 1 ? '\n  ' : '');
    });
  });
  return temp;
};


const generatorTopSearchTime = (data: any) => {
  if (!data.isRange) {
    return `<nz-date-picker [(ngModel)]="crud.searchParam.${data.field}"
           [nzAllowClear]="${data.allowClear}"
           [nzShowTime]="${data.showTime}"
           nzFormat="${data.showTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'}">
        </nz-date-picker>`;
  } else {
    return `<nz-range-picker [(ngModel)]="crud.searchParam.${data.field}"
            [nzAllowClear]="${data.allowClear}"
            [nzShowTime]="${data.showTime}"
            nzFormat="${data.showTime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'}">
        </nz-range-picker>`;
  }
};

const generatorTopSearchSelect = (data: any) => {
  return `<nz-select [(ngModel)]="crud.searchParam.${data.field}"
          nzPlaceHolder="${data.placeholder}"
          [nzAllowClear]="${data.allowClear}"
          [nzShowArrow]="${data.showArrow}"
          [nzShowSearch]="${data.showSearch}">
            <nz-option *ngFor="let item of ${data.field}List" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
        </nz-select>`;
};
